{% extends "base.html" %}
{% block script %}
    <script type="text/javascript" src="/site_media/js/check_address_page.js"></script>
{% endblock %}
{% block stylesheet %}
    <link rel="stylesheet" type="text/css" href="/site_media/css/user-panel.css" />
{% endblock %}
{% block content %}
    <div id="center">
        <span class="delivery-address-title">Please Choose Your Delivery Addresses</span>
        <div id="my-delivery-address">
            <p></p>
            {% if my_addresses %}
                {% for my_address in my_addresses %}
                    <p id="my-address-{{my_address.id}}">
                        <input type="radio" value="{{my_address.id}}" name="choose-address" id="choose_address_{{my_address.id}}" />
                        "{{my_address.name}},&nbsp;{{my_address.address}},&nbsp;{{my_address.postnumber}},&nbsp;{{my_address.city}},&nbsp;
                        {% if my_address.state %}
                            {{my_address.state}}
                        {% endif %}
                        {{my_address.country}},&nbsp;{{my_address.phone}}"
                        &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp;<a href="javascript:void(0)" onclick="modify_address({{my_address.id}})" style="color:blue;">[Modify]</a>
                    </p>
                {% endfor %}
            {% endif %}
            <p><input type="radio" id="add_new_address" name="choose-address" onclick="show_address_form()" value="" />&nbsp&nbsp;Add a new address</p>
            <p><input type="button" id="confirm-address" value="Confirm" onclick="jump_to_check_out_page()"/></p>
        </div>
        <div id="delivery-address" style="display:none">
            <span class="delivery-address-title">Add/Modify delivery address</span>
            <form method="post" action="javascript: add_address()" id="delivery-address-form">{% csrf_token %}
                <table id="delivery-address-table">
                    <tr>
                        <td colspan=4>
                            <label for="id_consignee">*Consignee</label>
                            <br>
                            {{form.consignee}}
                        </td>
                    </tr>
                    <tr>
                        <td colspan=4>
                            <label for="id_street_address">*Street Address:</label>
                            <br>
                            {{form.street_address}}
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="id_postal_code">*Postal Code:</label>
                            <br>
                            {{form.postal_code}}
                        </td>
                        <td>
                            <label for="id_city">*city:</label>
                            <br>
                            {{form.city}}
                        </td>
                        <td>
                            <label for="id_state">State:</label>
                            <br>
                            {{form.state}}
                        </td>
                        <td>
                            <label for="id_country">*Country:</label>
                            <br>
                            {{form.country}}
                        </td>
                    </tr>
                    <tr>
                        <td colspan=3>
                            <label for="id_phone">*Mobile Phone:</label>
                            <br>
                            {{form.phone}}
                        </td>
                        <td>
                            <input type="hidden" value="" id="address_id" />
                        </td>
                    </tr>
                </table>
                <input type="submit" value="Save" />
            </form>
        </div>
    </div>
{% endblock %}